<script setup lang="ts" name="PanelScriptTask">
import { mapState } from 'pinia'
import { useModelerStore } from '@/store/bpmnProcess/modelerStore'
import { isScriptTaskSupported, getScriptTask, setScriptTask } from '../../utils/scriptTask'
import EventEmitter from '@/utils/EventEmitter'
import { getScriptTypeList } from '../../utils'

const scriptTypeList = ref([])

const form: any = ref({
  script: {
    scriptFormat: '',
    scriptType: '',
    script: '',
    resource: '',
    resultVariable: ''
  }
})

const mapStates = computed(() => {
  return mapState(useModelerStore, ['getActive'])
})

const setScriptTaskValue = (type, v) => {
  setScriptTask(mapStates.value.getActive(), type, v)
}

const initData = () => {
  scriptTypeList.value = getScriptTypeList()
  form.value.script = getScriptTask(mapStates.value.getActive())
}

const eventEmitterListener = () => {
  if (isScriptTaskSupported(mapStates.value.getActive())) {
    initData()
  }
}

onBeforeUnmount(() => {
  EventEmitter.removeListener('element-update', eventEmitterListener)
})

onMounted(() => {
  initData()
  EventEmitter.on('element-update', eventEmitterListener)
})
</script>

<template>
  <el-collapse-item name="script-task">
    <template #title>
      <div class="collapse-header">
        <svg-icon icon="ri:javascript-fill"></svg-icon>
        <h2>脚本</h2>
      </div>
    </template>
    <el-form-item label="脚本格式">
      <el-input v-model="form.script.scriptFormat" @change="(v) => setScriptTaskValue('scriptFormat', v)" />
    </el-form-item>
    <el-form-item label="脚本类型">
      <el-select v-model="form.script.scriptType" @change="(v) => setScriptTaskValue('type', v)">
        <el-option v-for="item in scriptTypeList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item v-if="form.script.scriptType && form.script.scriptType === 'inline'" label="脚本内容">
      <el-input type="textarea" v-model="form.script.script" @change="(v) => setScriptTaskValue('script', v)" />
    </el-form-item>
    <el-form-item v-if="form.script.scriptType && form.script.scriptType === 'external'" label="资源地址">
      <el-input type="textarea" v-model="form.script.resource" @change="(v) => setScriptTaskValue('resource', v)" />
    </el-form-item>
    <el-form-item label="结果变量">
      <el-input v-model="form.script.resultVariable" @change="(v) => setScriptTaskValue('resultVariable', v)" />
    </el-form-item>
  </el-collapse-item>
</template>

<style scoped lang="scss">
.el-collapse-item {
  :deep(.el-collapse-item__header) {

    .collapse-header {
      display: flex;
      flex: 1;
      align-items: center;
      padding: 0 12px;

      .el-icon {
        margin-right: 6px;
        font-size: 20px !important;
      }

      h2 {
        font-weight: bold;
        font-size: 14px;
      }
    }

    .el-icon {
      font-size: 18px;
    }
  }

  :deep(.el-collapse-item__content) {
    padding-right: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
  }
}
</style>
